<template>
  <div class="attend-left">
    <group-title/>
    <div class="attend-l1">
      <category-title title="安防设施" title-sub="Security facilities"/>
      <device-info :datas="l1DeviceInfoT"/>
      <device-info :datas="l1DeviceInfoB"/>
    </div>
    <div class="attend-l2">
      <category-title title="人员管理" title-sub="Personnel management"/>
      <div class="person-stat-box">
        <person-stat :data="L2data" @wangui="wangui" @weigui="weigui"/>
      </div>
    </div>
    <div class="attend-l3">
      <category-title title="宿管值班列表" title-sub="Duty list"/>
      <div class="table-box">
        <simple-table :columns="l3ColumnData" :datas="l3TableData"/>
      </div>
    </div>
  </div>
  <div class="attend-middle" @click="roomChange">
    <div class="room-list-box">
      <room-list ref="listRoom" :datas="roomList" @select="onSelectRoom" @page-change="getRoomList"/>
    </div>
  </div>
  <div class="attend-right">
    <!--    :lv2="smartObject.sslObj.name+'号宿舍楼'"-->
    <group-title :only="true" lv1="宿舍详细信息">
      <div class="roomInstructions">
        <room-tooltip ref="tooltip" @checkChange="checkChange"/>
      </div>
    </group-title>
    <div class="wrap-1">
      <div class="icon"/>
      <div class="line"/>
      <div class="stat-box">
        <div class="title">
          {{ smartObject.sslObj.name }}号宿舍楼{{ roomName ? ` - ${roomName}` : "" }}
        </div>
        <!--        <div class="number">-->
        <!--          {{ data.kqrs }}-->
        <!--        </div>-->
      </div>
    </div>

    <div class="attend-r1">
      <!--      <category-title title="宿舍信息" title-sub="Dormitory Information"/>-->
      <div class="room-info-box" style="flex: 2">
        <room-info :datas="pageData.r1RoomInfoT" only title="基础信息"/>
      </div>
      <div class="room-info-box">
        <room-info :datas="pageData.r1RoomInfoB" :status="pageData.r1PersonStatus" title="今日考勤"/>
      </div>
      <div class="person-list-box">
        <person-list :count="pageData.r1PersonCount" :datas="pageData.r1PersonList" @student="studentDetails"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {inject, nextTick, reactive} from "vue";
import {
  AttendL2,
  AttendLouXQ,
  AttendRoom,
  AttendRoomAdmin,
  l1DeviceInfoB,
  l1DeviceInfoT,
  l3ColumnData,
  l3TableData,
  r1RoomInfoB,
  r1RoomInfoT,
} from "./data.js";

import GroupTitle from "@/components/customs/group-title/index.vue";
import CategoryTitle from "@/components/customs/category-title/index.vue";
import DeviceInfo from "@/components/customs/device-info/index.vue";
import PersonStat from "./components/person-stat/index.vue";
import SimpleTable from "@/components/customs/simple-table/index.vue";
import RoomList from "@/components/customs/room-list/index.vue";
import RoomInfo from "./components/room-info/index.vue";
import PersonList from "./components/person-list/index.vue";
import RoomTooltip from "@/components/customs/room-tooltip/index.vue";
import {OverviewRight} from "@/pages/overview/data";
import {ref} from "@vue/reactivity";
import {onMounted} from "@vue/runtime-core";

const onPageChange = inject("pageChange");
const smartObject = inject("smartObject");
const pageData = reactive({});
const floor = ref(null);
const listRoom = ref(null);
const roomList = ref({});
const tooltip = ref(null);
const L2data = ref({
  ygrs: 0,
  wgrs: 0,
  laters: 0,
  kqrs: 0,
  type:0,
});
const roomName = ref("");
pageData.r1RoomInfoT = JSON.parse(JSON.stringify(r1RoomInfoT));
pageData.r1RoomInfoB = JSON.parse(JSON.stringify(r1RoomInfoB));

const checkChange = (arr) => {
  listRoom.value.checkChange(arr);
};
const studentDetails = (item) => {
  smartObject.xh = item.XH;
  onPageChange(23);
};
const weigui = () => {
  smartObject.gjtype = '2';
  smartObject.gjid = smartObject.ssl;
  if (L2data.value.type === 3) {
    smartObject.gjsj = true;
  } else {
    smartObject.gjsj = false;
  }
  onPageChange(21);
};
const wangui = () => {
  smartObject.gjtype = '1';
  smartObject.gjid = smartObject.ssl;
  if (L2data.value.type === 3) {
    smartObject.gjsj = true;
  } else {
    smartObject.gjsj = false;
  }
  onPageChange(21);
};
const getRight = async () => {
  const api = new OverviewRight();
  api.params({
    ssl: smartObject.ssl,
  });
  await api.send();
  const {data} = await api.getDatas();
  l1DeviceInfoT.stat.value = data.sxtzs || 0;
  l1DeviceInfoT.wrap.forEach(item => {
    item.value = data[item.key] || 0;
  });
  l1DeviceInfoB.stat.value = data.kq || 0;
  l1DeviceInfoB.wrap.forEach(item => {
    item.value = data[item.key] || 0;
  });
};
getRight();

const roomChange = () => {
  roomName.value = "";
  pageData.r1RoomInfoT = JSON.parse(JSON.stringify(r1RoomInfoT));
  pageData.r1RoomInfoB = JSON.parse(JSON.stringify(r1RoomInfoB));
  pageData.r1PersonList = [];
  pageData.r1PersonStatus = -1;
  listRoom.value.closeRoom();
  // listRoom.value.selectedRoom._value = [-1, -1]
  // console.log(listRoom.value);
};
// 楼详情
const getRoomList = async (page) => {
  const api = new AttendLouXQ();
  api.params({
    page: 1,
    page_size: 300,
    pid: page,
  });
  await api.send();
  const {data} = await api.getDatas();
  roomList.value = data.data.reduce((shop, item) => {
    shop[item.lc] = shop[item.lc] ? {datas: [...shop[item.lc].datas, item], floor: item.lc} : {
      datas: [item],
      floor: item.lc
    };
    return shop;
  }, {});
  await nextTick(() => {
    listRoom.value.checkChange(tooltip.value.checkValue);
  });
  console.log(roomList.value);
};
// getRoomList();

const getRoomAdmin = async () => {
  const api = new AttendRoomAdmin();
  api.params({
    page: 1,
    page_size: 50,
  });
  await api.send();
  const {data} = await api.getDatas();
  l3TableData.value = data.data;
};
getRoomAdmin();
const getL2Data = async () => {
  const api = new AttendL2();
  api.params({
    ssl: smartObject.ssl,
  });
  await api.send();
  const {data: res, type} = await api.getDatas();
  L2data.value = res;
  L2data.value.text = ["", "考勤未启动", "考勤统计中", "考勤统计完毕"][type];
  L2data.value.type = type;
};
const onSelectRoom = async (info) => {
  console.log(info);
  floor.value = info.floor;
  const api = new AttendRoom();
  api.params({id: info.data.id});
  // api.params({id:1579})
  await api.send();
  const {data, ssxx, se} = await api.getDatas();
  "name" in se ? roomName.value = se.name : roomName.value = "";
  // pageData.r1RoomInfoT[0].value.main = "name" in se ? se.name : "--";
  // pageData.r1RoomInfoT[0].value.main = "name" in se ? se.name : "--";
  pageData.r1RoomInfoT[0].value.main = "cws" in se ? se.cws : "--";
  pageData.r1RoomInfoT[1].value.main = data.length || "0";
  pageData.r1RoomInfoB[0].value.main = ssxx.ssxx || "--";
  pageData.r1RoomInfoB[1].value.main = ssxx.wgrs || "--";
  pageData.r1RoomInfoB[2].value.main = ssxx.laters || "--";

  // pageData.r1PersonCount = data.length();
  pageData.r1PersonStatus = info.type;
  pageData.r1PersonList = data;
};
onMounted(() => {
  getL2Data();

});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
